<template>
  <CardBox>
    <el-form v-column="3" :model="dataFilter" label-width="70px">
      <el-form-item label="ID:">
        <el-input v-model="dataFilter.id" />
      </el-form-item>

      <el-form-item label="标题:">
        <el-input v-model="dataFilter.title" />
      </el-form-item>

      <el-form-item label="类别:">
        <el-select v-model="dataFilter.category" placeholder="选择一个类别">
          <el-option label="分类1" value="分类1" />
          <el-option label="分类2" value="分类2" />
        </el-select>
      </el-form-item>

      <el-form-item label="作者:">
        <el-input v-model="dataFilter.author" />
      </el-form-item>

      <el-form-item label="发布时间:">
        <el-date-picker
          v-model="dataFilter.createTime"
          type="date"
          placeholder="选择一个日期"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

  </CardBox>
  <CardBox title="列表">
    <template #title>
      <el-button type="danger" :icon="Delete">批量删除</el-button>
    </template>
    <el-table
      :data="sourceData.list"
      border
      height="260px"
      highlight-current-row
      stripe
    >
      <el-table-column label="ID" prop="id" width="60" />
      <el-table-column label="标题" prop="title" />
      <el-table-column label="类别" prop="category" />
      <el-table-column label="作者" prop="author" />
      <el-table-column label="发布时间" prop="createTime" />
      <el-table-column label="操作" align="center" width="160">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleAdd()">
            新增
          </el-button>
          <el-button type="primary" link @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="danger" link @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getList" />
  </CardBox>
  <TableDialog ref="dialog" @listChange="itemData" />
</template>

<script lang="ts" setup name="Table">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { getArticleList, deleteArticle } from '@/api/article'
import CardBox from '@/components/CardBox/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'
import TableDialog from './components/TableDialog.vue'
import FilterForm from '@/components/FilterForm/Index.vue'

const dataFilter = reactive({
  id: undefined,
  title: undefined,
  category: undefined,
  author: undefined,
  createTime: undefined,
})
const pageProps = ref({
  pageNum: 1,
  pageSize: 20,
  total: 0,
})
const getList = async () => {
  try {
    const res = await getArticleList({
      pageNum: pageProps.value.pageNum,
      pageSize: pageProps.value.pageSize,
      ...dataFilter
    })
    console.log('res', res)
    sourceData.list = res.data.records
    // TODO use real api total res total
    pageProps.value.total = 100
  } catch (e) {
    console.error('e', e)
  } finally {
    // something like loading close
  }
}

const sourceData = reactive({
  list: [] as any,
})
onMounted(() => {
  // getList()
})

const onSearch = () => {
  getList()
}
const onReset = () => {
  // TODO use method component
  dataFilter.id = undefined
  dataFilter.title = undefined
  dataFilter.category = undefined
  dataFilter.author = undefined
  dataFilter.createTime = undefined
  Object.assign(pageProps.value, {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  })
}

const dialog: any = ref(null)
const handleUpdate = (row: any) => {
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'edit'
  Object.assign(dialog.value.tableItem, row)
}
const handleAdd = () => {
  // TODO list item show blank
  // TODO btn diplay area not in table item 
  dialog.value.reset()
  // console.log('tableItem', dialog.value.tableItem)
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'create'
}
const itemData = () => {
  getList()
}
const handleDelete = (row: any) => {
  deleteArticle(row.id)
    .then((res: any) => {
      ElMessage.success('删除成功！')
      getList()
    })
    .catch((err: any) => {
      console.error('err', err.msg)
      ElMessage.success('删除失败！')
      getList()
    })
}

</script>
<!-- 解决 setuo语法糖写法 无法获取 keeplive include 组件name属性 以及 tagsview刷新当前页面问题 -->
<!-- 需要缓存的页面添加name属性 -->
<!-- https://www.jianshu.com/p/f583749bca82 -->
<!-- https://www.jianshu.com/p/2fd93e38ce03 -->
<!-- <script lang="ts">
  export default {
    name: 'Table'
  }
</script> -->

<style lang="scss" scoped></style>
